<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		//组件之间的通信
		<!-- 

			总结一：在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。
			父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
		总结二：子组件给父组件传递数据
		1.给子组件的template上的元素绑定事件（如click），执行子组件的方法（如changeData），子组件的方法中发射一个事件（如s），传一个数据（如lalala）；
		2.父组件中，定义一个方法（如getData）用来拿到子组件的数据。
		3.在自定义的组件上绑定子组件传过去的事件（s），执行事件（s）执行的是getData函数，getData函数中拿到数据（data，就是子组件传过去的lalala）。
		翻译一下
	
		 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用  -->
		<div id="app">
		    <parent></parent>
		</div>
		<template id="parent">
		    <div>
		        <p>父组件{{msg}}</p>//点击子组件触发getData获取到子组件转来的msg数据，绑定到父组件上
		        <children @s="getData"></children>
		    </div>
		</template>
		<script>
		    var app=new Vue({
		        el:'#app',
		        components:{
		            parent:{
		                template:'#parent',
		                data(){
		                    return {msg:'aaa'};
		                },
		                methods:{
		                    getData(data){
		                        alert(data);//子组件传过来的数据
		                        this.msg=data;
		                    }
		                },
		                components:{
		                    children:{
		                        template:'<p @click="changeData">子组件</p>',
		                        methods:{
		                            changeData(){
		                                this.$emit('s','lalala');//传递给父组件
		                            }
		                        }
		                    }
		                }
		            }
		        }
		    })
		</script>
		
		
		
		父组件给子组件传递数据(利用props属性)
		
		<div id="app">
		    <parent></parent>
		</div>
		
		<script>
		    var app=new Vue({
		        el:'#app',
		        components:{//一个父组件里边可以包含多个子组件
		            parent:{
		                template:'<h1 >{{msg}},父组件<children :n="msg"></children></h1>',
		                data:function(){//父组件的数据 传给子组件
		                    return {msg:'hello'}
		                },
		                components:{
		                  children:{
		                      props:['n'],//根据props拿到父组件中写的动态属性拿到数据
		                      template:'<h2>{{n}},子组件</h2>',
		                  }
		                }
		            }
		        }
		    })
	
	</body>
</html>
1